<script setup>
import { PlusOutlined } from '@ant-design/icons-vue'

defineOptions({
  name: 'FormAdvanced',
})

const columns = [
  { title: '成员姓名', dataIndex: 'name' },
  { title: '工号', dataIndex: 'number' },
  { title: '所属部门', dataIndex: 'department' },
  { title: '操作', dataIndex: 'action', key: 'action' },
]
const listData = [
  { id: '1', name: 'John Brown', number: '00001', department: 'New York No. 1 Lake Park' },
  { id: '2', name: 'Jim Green', number: '00002', department: 'London No. 1 Lake Park' },
  { id: '3', name: 'Joe Black', number: '00003', department: 'Sidney No. 1 Lake Park' },
]
</script>

<template>
  <a-page-header
    :ghost="false"
    main
    title="高级表单"
  >
    高级表单常见于一次性输入和提交大批量数据的场景。
  </a-page-header>
  <a-form layout="vertical">
    <a-card
      class="mb-8-2"
      title="仓库管理"
    >
      <a-row :gutter="8">
        <a-col
          :lg="6"
          :md="12"
          :sm="24"
        >
          <a-form-item label="仓库名">
            <a-input allow-clear />
          </a-form-item>
        </a-col>
        <a-col
          :lg="8"
          :md="12"
          :sm="24"
          :xl="{ span: 6, offset: 2 }"
        >
          <a-form-item label="仓库域名">
            <a-input allow-clear>
              <template #addonBefore>
                https://
              </template>
              <template #addonAfter>
                .com
              </template>
            </a-input>
          </a-form-item>
        </a-col>
        <a-col
          :lg="10"
          :md="24"
          :sm="24"
          :xl="{ span: 8, offset: 2 }"
        >
          <a-form-item label="仓库管理员">
            <a-select allow-clear />
          </a-form-item>
        </a-col>
        <a-col
          :lg="6"
          :md="12"
          :sm="24"
        >
          <a-form-item label="审批人">
            <a-input allow-clear />
          </a-form-item>
        </a-col>
        <a-col
          :lg="8"
          :md="12"
          :sm="24"
          :xl="{ span: 6, offset: 2 }"
        >
          <a-form-item label="生效日期">
            <a-range-picker
              :style="{ width: '100%' }"
              allow-clear
            />
          </a-form-item>
        </a-col>
        <a-col
          :lg="10"
          :md="24"
          :sm="24"
          :xl="{ span: 8, offset: 2 }"
        >
          <a-form-item label="仓库类型">
            <a-select allow-clear />
          </a-form-item>
        </a-col>
      </a-row>
    </a-card>
    <a-card
      class="mb-8-2"
      title="任务管理"
    >
      <a-row :gutter="8">
        <a-col
          :lg="6"
          :md="12"
          :sm="24"
        >
          <a-form-item label="任务名">
            <a-input allow-clear />
          </a-form-item>
        </a-col>
        <a-col
          :lg="8"
          :md="12"
          :sm="24"
          :xl="{ span: 6, offset: 2 }"
        >
          <a-form-item label="任务描述">
            <a-input allow-clear />
          </a-form-item>
        </a-col>
        <a-col
          :lg="10"
          :md="24"
          :sm="24"
          :xl="{ span: 8, offset: 2 }"
        >
          <a-form-item label="执行人">
            <a-select allow-clear />
          </a-form-item>
        </a-col>
        <a-col
          :lg="6"
          :md="12"
          :sm="24"
        >
          <a-form-item label="责任人">
            <a-input allow-clear />
          </a-form-item>
        </a-col>
        <a-col
          :lg="8"
          :md="12"
          :sm="24"
          :xl="{ span: 6, offset: 2 }"
        >
          <a-form-item label="生效日期">
            <a-date-picker
              :style="{ width: '100%' }"
              allow-clear
              placeholder=""
            />
          </a-form-item>
        </a-col>
        <a-col
          :lg="10"
          :md="24"
          :sm="24"
          :xl="{ span: 8, offset: 2 }"
        >
          <a-form-item label="任务类型">
            <a-select allow-clear />
          </a-form-item>
        </a-col>
      </a-row>
    </a-card>
    <a-card title="成员管理">
      <a-table
        :columns="columns"
        :data-source="listData"
        :pagination="false"
        row-key="id"
      >
        <template #bodyCell="{ column }">
          <template v-if="column.key === 'action'">
            <x-action-button>编辑</x-action-button>
          </template>
        </template>
      </a-table>

      <a-button
        block
        class="mt-8-2"
        type="dashed"
      >
        <template #icon>
          <plus-outlined />
        </template>
        添加一行数据
      </a-button>
    </a-card>
  </a-form>
</template>

<style lang="less" scoped></style>
